import {Component, OnInit, EventEmitter, Output} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/debounceTime';
import {ApplicationService} from '../../../service/application.service';
import * as $ from 'jquery';

@Component({
  selector: 'app-navigation-toolbar',
  templateUrl: './navigation-toolbar.component.html',
  styleUrls: ['./navigation-toolbar.component.css']
})
export class NavigationToolbarComponent implements OnInit {
  isShow = false;
  scale = 1;
  step = 0.1;
  bodyWidth = 0;
  bodyHeight = 0;
  scaleX = 1;
  scaleY = 1;
  /**
   *最小缩放默认值
   *
   * @memberof NavigationToolbarComponent
   */
  scaleMin = 0.6;
  /**
   *最大缩放默认值
   *
   * @memberof NavigationToolbarComponent
   */
  scaleMax = 2;
  /**
   *标准屏幕尺寸宽
   *
   * @memberof NavigationToolbarComponent
   */
  screenSizeW = 1600;
  /**
   *标准屏幕尺寸高
   *
   * @memberof NavigationToolbarComponent
   */
  screenSizeH = 900;
  @Output() changeScale = new EventEmitter<number>();
  /**
   *页面缩放是否根据分辨率自动缩放
   *true为缩放
   *false为不缩放
   *默认为true
   *
   * @memberof NavigationToolbarComponent
   */
  isZoom = true;

  constructor(
    private application: ApplicationService,
  ) {
  }

  ngOnInit() {
    if (this.application.currentApplicationParams && this.application.currentApplicationParams['isZoom']) {
      const paramValue = this.application.currentApplicationParams['isZoom'].paramValue;
      if (paramValue === 'true') {
        this.isZoom = true;
      } else if (paramValue === 'false') {
        this.isZoom = false;
      }

    }
    ;
    if (this.application.currentApplicationParams && this.application.currentApplicationParams['screenSize']) {
      const scaleValue = this.application.currentApplicationParams['screenSize'].paramValue;
      let splitArr: any[];
      if (this.isZoom) {
        splitArr = scaleValue.split('*');
        if (splitArr.length === 2) {
          this.screenSizeW = splitArr[0];
          this.screenSizeH = splitArr[1];
        }
      }


    }
    ;
    let setScreenSize
    if (this.isZoom) {
      setScreenSize = {
        width: this.screenSizeW + 'px',
        height: this.screenSizeH + 'px',
      };
    } else {
      setScreenSize = {
        /* width: '100%',
        height: '100%', */
        'min-width': '1490px',
        'min-height': '790px'
      };
    }

    $('body').css(setScreenSize);
    $('.pagebg').css(setScreenSize);
    $('.qu-bg').css(setScreenSize);
    $('#cnt').css(setScreenSize);
    if (this.application.currentApplicationParams && this.application.currentApplicationParams['pageZoomValue']) {
      const scaleValue = this.application.currentApplicationParams['pageZoomValue'].paramValue;
      let splitArr: any[];
      if (scaleValue.indexOf(';') > -1) {
        splitArr = scaleValue.split(';');

      } else if (scaleValue.indexOf('；') > -1) {
        splitArr = scaleValue.split('；');

      }
      ;
      if (splitArr.length === 2) {
        this.scaleMin = splitArr[0];
        this.scaleMax = splitArr[1];
      }
    }
    this.bodyWidth = $('body').width();
    this.bodyHeight = $('body').height();
    this.windowResize();
    Observable.fromEvent(window, 'resize')
      .debounceTime(100) // 以免频繁处理
      .subscribe((event: Event) => {
        // 这里处理页面变化时的操作
        this.windowResize();

      });

  }

  windowResize() {
    if (!this.isZoom) {
      return false;
    }
    ;
    if ($(window).width() > 800) {
      this.scaleX = $(window).width() / this.bodyWidth;
    } else {
      this.scaleX = 800 / this.bodyWidth;
    }
    if ($(window).height() > 600) {
      this.scaleY = $(window).height() / this.bodyHeight;
    } else {
      this.scaleY = 600 / this.bodyHeight;
    }

    this.scaleSet();

  }

  onMouseEnter() {
    this.isShow = true;
  }

  onMouseLeave() {
    this.isShow = false;
  }

  onMinus() {
    if (this.scale > this.scaleMin) {
      this.scale -= this.step;
      this.scale = parseFloat(this.scale.toFixed(1));
      this.scaleSet();
    }

  }

  onAdd() {
    if (this.scale < this.scaleMax) {
      this.scale += this.step;
      this.scale = parseFloat(this.scale.toFixed(1));
      this.scaleSet();
    }
  }

  onRefesh() {
    if (this.scale !== 1) {
      this.scale = 1;
      this.scaleSet();
    }
  }

  scaleSet() {
    /* let transformOrigin: string;
    if (this.scale < 1) {
      transformOrigin = '50% 50%';
    } else {
      transformOrigin = '0 0';
    } */
    this.changeScale.emit(this.scale);
    $('body').css({
      'transform': `scale(${this.scaleX * this.scale},${this.scaleY * this.scale})`,
      //'transform-origin': transformOrigin
    });

  }
}

